<template>
  <div class="base-panels">
    <anchorLink :links="links"></anchorLink>
    <section class="pt20" :id="`c${index+1}`" v-for="(item, index) in tabConfig" :key="index">
      <div class="certs-title">
        {{ item.title }}<i>{{ item.total }}</i>
      </div>
      <Table
        :columns="columns"
        :row-key="(record, index) => index"
        :data-source="sList"
        :pagination="page"
        :loading="loading"
        bordered
      >
        <template #indexSlot="{ index }">{{ index + 1 }}</template>
        <template #limitDateSlot="{ record: { joinTime, leaveTime } }">
          {{ parseTime(joinTime) }} ~ {{ parseTime(leaveTime) }}
        </template>
        <template #punishSlot="{ record: { workPost, workJob } }">
          {{ workPost }}<span v-if="workJob">（{{ workJob }}）</span>
        </template>
      </Table>
    </section>
    <p class="pt10"><span class="orange">提示：</span> 历史工作履历来源于用户个人编辑，本网站不对信息正确性负责。</p>
  </div>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, ref, toRefs} from "vue";
import { Table } from "ant-design-vue";
import { BasePanel } from "/@/components/panelComponent/index";
import { getPersonResumeApi } from "/@/api/staff";
import { anchorLink } from "/@/components/linkComponent/index";
import { parseTime } from "/@/utils";
const columns = [
  {
    title: "序号",//
    dataIndex: "index",
    width: 70,
    align: "center",
    slots: { customRender: "indexSlot" },
  },
  {
    title: "时间",
    dataIndex: "punish",
    slots: { customRender: "limitDateSlot" },
  },
  { title: "所在单位", dataIndex: "compName" },
  {
    title: "从事岗位（职务）",
    dataIndex: "workJob",
    slots: { customRender: "punishSlot" },
  },
];

export default defineComponent({
  components: { BasePanel, Table , anchorLink},
  setup() {
    const personId = inject("personId") as string;

    const config = reactive({
      columns,
      pList: [],
      sList: [],
      loading: false,
      page: false,
    });
    const tabConfig: Array<any> = [
      //{ key: "2", title: "聘用轨迹", total: 0 },
      { key: "1", title: "历史工作履历", total: 0 },
    ];

    const changeHandler = (item) => {
      let { loading, pList, sList } = toRefs(config);
      loading.value = true;
      if (item.key == "2") {
        getPersonResumeApi({ personId, sourceFlag: item.key }).then((data) => {
          pList.value = data;
          item.total = data.length;
        });
      } else {
        getPersonResumeApi({ personId, sourceFlag: item.key }).then((data) => {
          sList.value = data;
          item.total = data.length;
        });
      }
      loading.value = false;
    };

    const init = () => {
      tabConfig.forEach((item) => {
        changeHandler(item);
      });
    };

    onMounted(init);

    return {
      ...toRefs(config),
      parseTime,
      tabConfig,
      links: ref([
      //{key: '#c1',title: '聘用轨迹'},
        {
          key: '#c2',
          title: '历史工作履历'
        }
    ])
    };
  },
});
</script>

<style lang="less" scoped>
.pt20{
  padding-top: 20px;
}

.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}
</style>
